<template>
    <div class="user-table-wrap">
      <div class="add-delete-wrap">
        <el-button-group>
          <el-button type="primary" icon="el-icon-plus" @click="addUser">新增
          </el-button>
          <el-button type="danger" icon="el-icon-delete" @click="batchDelete">批量删除
          </el-button>
        </el-button-group>
      </div>
      <el-table
        :data="tableData"
        stripe
        style="width: 100%"
        v-bind:max-height="maxHeight"
        ref="multipleTable"
        @row-click="rowClick"
        @selection-change="selectionChange"
        header-row-class-name="headerClass">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column
          type="index"
          width="50"
          label="序号">
        </el-table-column>
        <el-table-column
          prop="date"
          label="日期"
          width="180">
        </el-table-column>
        <el-table-column
          prop="name"
          label="姓名"
          width="180">
        </el-table-column>
        <el-table-column
          prop="address"
          label="地址">
        </el-table-column>
        <el-table-column
          label="操作"
          fixed="right"
          width="200">
          <template slot-scope="scope">
            <el-button-group>
              <el-button
                size="mini" icon="el-icon-view"
              ></el-button>
            <el-button
              size="mini" icon="el-icon-edit" type="primary"
              ></el-button>
            <el-button
              size="mini"
              type="danger" icon="el-icon-delete"
              ></el-button>
            </el-button-group>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page="pageParam.currentPage"
        :page-sizes="pageParam.pageSizes"
        :page-size="pageParam.pageSize"
        :layout="pageParam.layout"
        :total="pageParam.total">
      </el-pagination>
      <user-add :showDialog="showAddUserDialog" @cancelDialog="cancelDialog" @submitDialog="submitDialog">
        这是自定义内容
      </user-add>
    </div>

</template>

<script>
import UserAdd from '@/pages/organ/user-add'

    export default {
        name: 'HelloWorld',
        components:{
          'user-add':UserAdd
        },
        data() {
            return {
                msg: 'Welcome to Your Vue.js App',
                maxHeight:document.documentElement.clientHeight-250,
                showAddUserDialog:false,
                currentPage4:1,
                multipleSelect:[],
                tableData: [],
                pageParam:{
                currentPage:1,
                pageSizes:[100,200,300,400],
                pageSize:100,
                total:500,
                layout:"total, sizes, prev, pager, next, jumper"
              }
            }
        },
        created () {
          let that = this;
          this.$ajax.get('/api/organ/userList').then(function(res){
            that.tableData = res.data.list;
          });
        },
      mounted() {
          let that = this;
          window.onresize = function temp() {
          that.maxHeight = document.documentElement.clientHeight -250;
        };
      },
      methods:{
        addUser () {
          this.showAddUserDialog = true;
        },
        cancelDialog () {
          this.showAddUserDialog = false;
        },
        submitDialog() {
          this.showAddUserDialog = false;
        },
        rowClick (row, event, column) {
          //选择行
          console.log(row);
          this.$refs.multipleTable.toggleRowSelection(row);
        },
        selectionChange(selection) {
          this.multipleSelect = selection;
        },
        batchDelete() {
          if (this.multipleSelect.length == 0) {
            this.$alert('至少选择一行', '提示', {
              confirmButtonText: '确定',
              type:'warning'
            });
          } else {
            this.$confirm('此操作将永久删除记录, 是否继续?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
            }).catch(() => {
              this.$message({
                type: 'info',
                message: '已取消删除'
              });
            });
          }
        }
      }
    }
</script>
<style scoped>
  .add-delete-wrap {
    margin-bottom: 10px;
    margin-left: 10px;
  }
</style>
<style>
  .headerClass th{
    background-color: #f7f7fc;
  }
</style>

